<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>粮仓工厂</title>
    <style>
      body {
        margin:0;
        overflow: hidden;
        color: #FFF;
        font-size: 14px;
        position: relative
        /* 隐藏body窗口区域滚动条 */
      }
      .equipmentLabel {
        width: 200px;
        height: 400px;
        background-image: url("./assets/img/1.png");
        background-size: 191px auto;
        
      }
    </style>
  </head>

  <body>
    <!-- 我们将把three.js渲染的效果显示在这个div中，div为容器 -->
    <div id="three-view" >

    </div>
    <div id="label_white" style="visibility:hidden">
      <div style="position:relative;">
          <div style="position: absolute;top:-120px;left:55px;width:100px;color:#ffffff;">
          </div>
          <div style="position: absolute;top:-100px;left:0px;">
              <img src="./assets/img/label_white.png" alt=""/>
          </div>
      </div>
    </div>
    <div id="label_green" style="visibility:hidden">
      <div style="position:relative;">
          <div style="position: absolute;top:-50px;left:20px;width:100px;color:#03B5B3;">
          </div>
          <div style="position: absolute;top:-30px;left:0px;">
              <img src="./assets/img/label_green.png" alt="">
          </div>
      </div>
    </div>
    <div id="dialog" style="visibility:hidden;z-index: 102;padding-left: 700px;height: 400px;" >
      <img src="./assets/img/1.png" alt="" style="width:200px;opacity: 1.0;position:absolute">
      <div style="position:relative;width:500px;margin-left: 180px;">    
        <div style="position: absolute;left: 0px;top: 0px;">
            <img src="./assets/img/plane.png" alt="" style="width:400px;opacity: 1.0;">
        </div>
        <div id="name" style="position:absolute;left:25px;top:40px;font-size:16px"></div>
        <div style="position:absolute;left:290px;top:25px">
            <img src="./assets/img/tem.png" alt="" style="width:50px;">
        </div>
        <div id="tem" style="position:absolute;left:330px;top:40px"></div>
        <div id="grain" style="position:absolute;left:170px;top:50px"></div>
        <div style="position:absolute;left:80px;top:85px;font-size:60px;color:#00ffff;vertical-align:middle">
            <img id="imgGrain" src="" alt="" style="width:60px;">
        </div>
        <div id="weight" style="position:absolute;left:155px;top:80px;font-size:60px;color:#00ffff;vertical-align:middle"></div>
        <div id="heightC" style="position:absolute;left:70px;top:170px;padding:8px 25px;border-radius:30px;border:1px solid #00ffff;"></div>
        <div id="height" style="position:absolute;left:225px;top:170px;padding:8px 25px;"></div>
      </div>
    </div>

    <script type="module">
      import * as THREE from "../src/Three.js"
      import { GLTFLoader } from '../jsm/loaders/GLTFLoader.js';
      import { OBJLoader } from '../jsm/loaders/OBJLoader.js';
      import { OrbitControls } from '../jsm/controls/OrbitControls.js';
      //后处理js
      // EffectComposer(效果组合器)对象
      import { EffectComposer } from '../jsm/postprocessing/EffectComposer.js'
      // RenderPass该通道在指定的场景和相机的基础上渲染出一个新场景
      import { RenderPass } from '../jsm/postprocessing/RenderPass.js'
      import { OutlinePass } from '../jsm/postprocessing/OutlinePass.js'
      //2D信息
      import {CSS2DRenderer,CSS2DObject} from "../jsm/renderers/CSS2DRenderer.js";
      //Tween
      import {TWEEN} from "../jsm/libs/tween.module.min.js";
      //GUI辅助工具
      import { GUI } from '../jsm/libs/lil-gui.module.min.js'
      //导入模拟数据
      import {labelData} from './assets/labelData/labelData.js'

      //初始角度
      var currentAngle = 0.01
      //旋转中
      var doRotate = true

      //粮仓数据
      var equipmentLabelData = labelData()[0]
      //粮仓整体模型数据
      var meshGroup = new THREE.Group()

      //纹理贴图路径
      var textPath = './assets/textures/'
      //改变天空盒子纹理——晴天
      var boxBg1 = ['posx.jpg','negx.jpg','posy.jpg','negy.jpg','posz.jpg','negz.jpg']
      //改变天空盒子纹理——阴天
      var boxBg2 = ['posx_gray.jpg','negx_gray.jpg','posy_gray.jpg','negy_gray.jpg','posz_gray.jpg','negz_gray.jpg']
      //所有的精灵模型（雨滴/雪花）
      var pointGroup = null
      //当前显示的天气标识(0晴天，1阴天，2雨天，3雪天)
      var currentType = 0

      //鼠标点击-屏幕坐标
      let mouse = new THREE.Vector2();
      //用于检测的射线
      let raycaster = new THREE.Raycaster();
      //模型数组，由于射线拾取
      var meshArray = null
      //效果组合
      let compose = null

      let labelCSS2DGroup = []
      let label2DDialog = null
      
      //创建场景对象
      var scene = createdScene()
      //创建相机
      var camera = createdCamera()
      //创建、添加光源
      scene.add(createdLight())
      //初始化2D渲染器
      var labelRenderer = created2DRender()
      //创建渲染器
      var renderer = createdRender()
      
      // 辅助坐标系 参数250表示坐标系大小，可以根据场景大小去设置
      var axesHelper = new THREE.AxesHelper(250)
      scene.add(axesHelper)

      //加载模型——地面
      createdPlane()
      //加载模型——围栏
      createdWall() 
      //加载模型——公路
      createdRoad()
      //加载模型——厂房
      createdFactoryBuilding()
      //加载模型——圆仓——高
      createdRoundTall()
      //加载模型——圆仓——矮
      createdRoundShort()
      
      //执行渲染
      scene.add(meshGroup)
      console.log("scene",scene)
      render()
      //鼠标操作   
      mouseMove()

      //创建GUI辅助
      var gui = new GUI()
      //创建参数对象
      var params = {
        '天气' :'晴天',
        'states' :['晴天','阴天','雨天','雪天'],
        '显示火苗' :false, //是否显示火苗
        '显示标签':false
      }
      gui.add(params,'天气').options(params['states']).onChange(e=>{
        switch (e) {
          case '晴天':
            if (currentType != 0) {
              //删除雨雪效果
              scene.remove(scene.getObjectByName("particles_rainy"));
							scene.remove(scene.getObjectByName("particles_snowy"));
              //改变天空盒子纹理——晴天
              scene.background = new THREE.CubeTextureLoader().setPath(textPath).load(boxBg1)
              //设置环境光
              scene.getObjectByName("aLight").intensity = 1.2;
              currentType = 0
            }
            break;
          case '阴天':
            if (currentType != 1) {
              scene.remove(scene.getObjectByName("particles_rainy"));
							scene.remove(scene.getObjectByName("particles_snowy"));
              scene.background = new THREE.CubeTextureLoader().setPath(textPath).load(boxBg2)
              scene.getObjectByName("aLight").intensity = 1;
              currentType = 1
            }
            break;
          case '雨天':
            if (currentType != 2) {
              scene.remove(scene.getObjectByName("particles_snowy"));
              scene.background = new THREE.CubeTextureLoader().setPath(textPath).load(boxBg2)
              scene.getObjectByName("aLight").intensity = 0.6;
              //加载雨水
              createPoint(2)
              currentType = 2
            }
            break;
          case '雪天':
            if (currentType != 3) {
              scene.remove(scene.getObjectByName("particles_rainy"));
              scene.background = new THREE.CubeTextureLoader().setPath(textPath).load(boxBg1)
              scene.getObjectByName("aLight").intensity = 2;
              //加载雪花
              createPoint(3)
              currentType = 3
            }
            break;      
          default:
            break;
        }
      })
      gui.add(params,'显示火苗').onChange(e=>{
        console.log("火苗状态",e)
      })
      gui.add(params,'显示标签').onChange(e=>{
        labelCSS2DGroup.forEach(labelCSS2D=>{
          labelCSS2D.visible = !labelCSS2D.visible
        })  
      })

      /*
      *创建地面并添加材质
      */
      function createdPlane() {
        //创建纹理贴图加载器
        var textureLoader = new THREE.TextureLoader()
        var cubeMaterial = new THREE.MeshStandardMaterial({
          map: textureLoader.load("assets/textures/floor3.png"),
          transparent: true,
          side: THREE.DoubleSide,
        });
        // 创建地平面并设置大小
        var planeGeometry = new THREE.PlaneGeometry(270, 260);
        var plane = new THREE.Mesh(planeGeometry, cubeMaterial);

        // 设置平面位置并旋转
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.y = -0.1;
        meshGroup.add(plane)
        //return plane
      }

      /*
      *创建围栏
      */
      function createdWall() {
        //创建obj加载器
        var objLoader = new OBJLoader()
        objLoader.load('./assets/obj/wall.obj',(obj)=>{
          obj.scale.set(0.98, 0.6, 1);
          //创建纹理贴图加载器，加载纹理贴图
          var textureLoader = new THREE.TextureLoader()
          //加载栏杆纹理贴图
          textureLoader.load('./assets/textures/lan2.png',(texture)=>{
            //栏杆纹理重复
            texture.wrapS = THREE.RepeatWrapping;
            texture.wrapT = THREE.RepeatWrapping;
            //uv两个方向纹理重复数量
            texture.repeat.set(40, 1);
            obj.children[0].material = new THREE.MeshBasicMaterial({
              side:THREE.DoubleSide,
              map:texture,
              transparent:true
            })
          })
          //加载栏杆-门 纹理贴图
          textureLoader.load('./assets/textures/door.png',(texture)=>{
            obj.children[1].material = new THREE.MeshBasicMaterial({
              side:THREE.DoubleSide,
              map:texture,
              transparent:true
            })
          })
          //scene.add(obj)
          meshGroup.add(obj)
        })
      }

      /*
      *创建公路
      */
      function createdRoad() {
        // //创建几何体
        var geometry = new THREE.PlaneGeometry(24,1080)
        //创建纹理贴图加载器，记载纹理贴图
        new THREE.TextureLoader().load('./assets/textures/road2.png',(texture)=>{
          //栏杆纹理重复
          texture.wrapS = THREE.RepeatWrapping;
          texture.wrapT = THREE.RepeatWrapping;
          //uv两个方向纹理重复数量
          texture.repeat.set(1, 10);
          //创建材质
          var material = new THREE.MeshBasicMaterial({
            map:texture,
            side:THREE.DoubleSide
          })
          var mesh = new THREE.Mesh(geometry,material)
          mesh.rotateX(-Math.PI / 2);
          mesh.rotateZ(Math.PI / 2);
          mesh.position.z = 130 + 12
          //scene.add(mesh)
          meshGroup.add(mesh)
        })
      }

      /*
      *创建厂房（加载单个厂房模型，然后克隆模型）
      */
      function createdFactoryBuilding() {
        //加载厂房模型
        var objLoader = new OBJLoader()
        objLoader.load('./assets/obj/factory_building.obj',(obj)=>{
          meshArray = obj
          //获取模型
          var mesh = obj.children[0]
          //加载纹理贴图
          new THREE.TextureLoader().load('./assets/textures/factory_building.png',(texture)=>{
            //给模型加材质
            mesh.material = new THREE.MeshBasicMaterial({
              map:texture
            })
            //基准模型定位
            mesh.scale.set(1.3, 1.4, 1.5);
						mesh.position.set(11, 0, -85);
            //模型克隆
            for (let i = 0; i < 2; i++) {
							for (let j = 0; j < 3; j++) {
								var mc = mesh.clone();
                if (i==0) {
                  mc.code = `P-${j+1}号`
                  mc.name = `平房仓 P-${j+1}号`
                }else{
                  mc.code = `P-${j+4}号`
                  mc.name = `平房仓 P-${j+4}号`
                }
								mc.translateX(i * 52);
								mc.translateZ(j * 83);
                //创建粮仓内部模型
                var geometry = new THREE.BoxGeometry(20,equipmentLabelData[mc.code].height,39)//第2个参数是高度
                var material = new THREE.MeshLambertMaterial({
                  color:0xe99147
                })
                var mcInner = new THREE.Mesh(geometry,material) 
                mcInner.translateY(4)
                mc.add(mcInner)
                //创建标签
                var node = document.getElementById('label_white').cloneNode(true)
                node.className = 'label'
                node.style.visibility='visible'
                node.childNodes[1].childNodes[1].textContent = mc.name
                var labelCSS2D = new CSS2DObject(node);
                //labelCSS2D.position.set(mc.position.x,mc.position.y,mc.position.z)
                labelCSS2D.visible = false
                mc.add(labelCSS2D)
                labelCSS2DGroup.push(labelCSS2D)
                
								//scene.add(mc);
                meshGroup.add(mc)
                meshArray.children.push(mc)
                
							}
						}
          })
        })
      }

      /*
      *创建圆仓——高（加载单个模型，然后克隆模型）
      */
      function createdRoundTall() {
        //加载圆仓模型
        var objLoader = new OBJLoader()
        objLoader.load('./assets/obj/round_tall.obj',(obj)=>{
          //获取模型
          var mesh = obj.children[0]
          //加载纹理贴图
          new THREE.TextureLoader().load('./assets/textures/round_tall.png',(texture)=>{
            //给模型加材质
            mesh.material = new THREE.MeshBasicMaterial({
              map:texture
            })
            //基准模型定位
            mesh.rotateZ(Math.PI);
						mesh.position.set(-40, 36, -105);
            //模型克隆
            for (let i = 0; i < 2; i++) {
							for (let j = 0; j < 3; j++) {
								var mc = mesh.clone();
                if (i==0) {
                  mc.code = `L-${j+1}号`
                  mc.name = `立筒仓 L-${j+1}号`
                }else{
                  mc.code = `L-${j+4}号`
                  mc.name = `立筒仓 L-${j+4}号`
                }
								mc.translateX(i * 28);
								mc.translateZ(j * 20);
                //创建内部模型
                var geometry = new THREE.CylinderGeometry(7,7,35,25)
                var material = new THREE.MeshLambertMaterial({
                  color:0xb63427
                })
                var mcInner = new THREE.Mesh(geometry,material)
                mcInner.translateY(18)
                mc.add(mcInner)

                //创建标签
                var node = document.getElementById('label_green').cloneNode(true)
                node.className = 'label'
                node.style.visibility='visible'
                node.childNodes[1].childNodes[1].textContent = mc.name
                var labelCSS2D = new CSS2DObject(node);
                //labelCSS2D.position.set(mc.position.x,mc.position.y,mc.position.z)
                labelCSS2D.visible = false
                mc.add(labelCSS2D)
                labelCSS2DGroup.push(labelCSS2D)

								//scene.add(mc);
                meshGroup.add(mc)
                meshArray.children.push(mc)
							}
						}
          })
        })
        
      }
      
      /*
      *创建圆仓——矮
      */
      function createdRoundShort() {
        //加载圆仓模型
        var objLoader = new OBJLoader()
        objLoader.load('./assets/obj/round_short.obj',(obj)=>{
          //获取模型
          var mesh = obj.children[0]
          //加载纹理贴图
          new THREE.TextureLoader().load('./assets/textures/round_short.png',(texture)=>{
            //给模型加材质
            mesh.material = new THREE.MeshBasicMaterial({
              map:texture
            })
            //基准模型定位
            mesh.rotateZ(Math.PI);
						mesh.position.set(-40, 20, -19);
            //模型克隆
            for (let i = 0; i < 2; i++) {
							for (let j = 0; j < 6; j++) {
								var mc = mesh.clone();
                if (i==0) {
                  mc.code = `Q-${j+1}号`
                  mc.name = `浅圆仓 Q-${j+1}号`
                }else{
                  mc.code = `Q-${j+7}号`
                  mc.name = `浅圆仓 Q-${j+7}号`
                }
								mc.translateX(i * 28);
								mc.translateZ(j * 24);

                //创建内部模型
                var geometry = new THREE.CylinderGeometry(9,9,19,25)
                var material = new THREE.MeshLambertMaterial({
                  color: 0x91a337
                })
                var mcInner = new THREE.Mesh(geometry,material)
                mcInner.translateY(10)
                mc.add(mcInner)

                //创建标签
                var node = document.getElementById('label_green').cloneNode(true)
                node.className = 'label'
                node.style.visibility='visible'
                node.childNodes[1].childNodes[1].textContent = mc.name
                var labelCSS2D = new CSS2DObject(node);
                //labelCSS2D.position.set(mc.position.x,mc.position.y,mc.position.z)
                labelCSS2D.visible = false
                mc.add(labelCSS2D)
                labelCSS2DGroup.push(labelCSS2D)

								//scene.add(mc);
                meshGroup.add(mc)
                meshArray.children.push(mc)
							}
						}
            console.log("mesh",meshArray)
          })
        })
      }

      /*
      *创建雨滴/雪花粒子系统
      */
      function createPoint(type) {
        var img = type===2?'rain_drop.png':'snow.png'
        var name = type===2?"particles_rainy":"particles_snowy"
        //加载雨滴/雪花纹理贴图
        var texture = new THREE.TextureLoader().load(`${textPath}${img}`)
        //创建精灵材质
        var material = new THREE.SpriteMaterial({
          map:texture,//设置精灵纹理贴图
        })
        //批量创建精灵模型对象
        pointGroup = new THREE.Group()
        var range = 350;
        for(let i = 0;i<3500;i++){
          //创建精灵模型对象
          var sprite = new THREE.Sprite(material)
          //创建位置
          var k1 = Math.random() * range - range / 2
          var k2 = Math.random() * range * 1.5
          var k3 = 1 + (i / 10 - 180)
          //设置精灵模型位置，在整个空间上随机分布
          sprite.position.set(k1,k2,k3)
          //sprite.name = name
          pointGroup.add(sprite)
        }
        pointGroup.name = name
        scene.add(pointGroup)
      }

      //鼠标点击事件
      function onPointerClick(event) {
        const [w,h] = [window.innerWidth,window.innerHeight]
        mouse.x = (event.clientX / w) * 2 - 1
        mouse.y = -(event.clientY / h) * 2 + 1
        //更新射线
        raycaster.setFromCamera(mouse, camera)
        //返回被击中的信息
        const intersects = raycaster.intersectObject(meshArray, true)
        if (intersects.length <= 0) {
          if (label2DDialog) {
            label2DDialog.visible = false
            compose = null
          }
          return false;
        }
        const selectedObject = intersects[0].object
        if (selectedObject.isMesh) {
          outline([selectedObject])
          //显示弹窗
          updateLabel(intersects[0],equipmentLabelData[selectedObject.code])
        }
      }

      //点击后高亮线框渲染
      function outline(selectedObjects,color = new THREE.Color(0, 1, 0)) {
        const [w,h] = [window.innerWidth,window.innerHeight]
        //RenderPass这个通道会渲染场景，但不会将渲染结果输出到屏幕上
        let renderPass = new RenderPass(scene,camera)
        //高亮数据
        let outlinePass = new OutlinePass(
          new THREE.Vector2(w,h),//分辨率
          scene,
          camera,
          selectedObjects//选中的物体对象，传入需要边界线进行高亮处理的对象
        )
        outlinePass.renderToScreen = true
        outlinePass.selectedObjects = selectedObjects
        outlinePass.edgeStrength = 3//粗
        outlinePass.edgeGlow = 0//发光
        outlinePass.edgeThickness = 1.0
        outlinePass.visibleEdgeColor.set(color);//设置显示的颜色
        outlinePass.hiddenEdgeColor.set(color);//设置隐藏的颜色

        //创建效果组合器对象，可以在该对象上添加后期处理通道，通过配置该对象， 
        //使它可以渲染我们的场景，并应用额外的后期处理步骤，在render循环中，
        //使用EffectComposer渲染场景、应用通道，并输出结果
        compose = new EffectComposer(renderer)

        compose.addPass(renderPass)
        compose.addPass(outlinePass)
        compose.render(scene,camera)
      }

      //更新信息窗位置
      function updateLabel(intersect,labelData){
        document.getElementById('name').innerHTML = labelData.name
        document.getElementById('tem').innerHTML = `${labelData.temperature} ℃`
        document.getElementById('grain').innerHTML = `${labelData.grain}(吨)`
        document.getElementById('weight').innerHTML = `${labelData.weight}t`
        document.getElementById('heightC').innerHTML = `仓高—${labelData.heightC} m`
        document.getElementById('height').innerHTML = `粮高—${labelData.height} m`
        document.getElementById("imgGrain").setAttribute("src",labelData.imgPath); 
        const point = intersect.point;
        label2DDialog.position.set(point.x-0.01, point.y+0.01, point.z-0.03);
        label2DDialog.visible = true
      }

      /*
      *创建场景
      */
      function createdScene() {
        var scene = new THREE.Scene()
        //创建天空盒子-将纹理作为场景的背景来创建
        scene.background = new THREE.CubeTextureLoader().setPath(textPath).load(boxBg1)
        return scene
      }

      /*
      *创建相机
      */
      function createdCamera(){
        // 创建一个摄像机，它定义了我们正在看的地方
				camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 20000);
				// 将摄像机对准场景的中心
				// camera.position.x = 180;
				// camera.position.y = 80;
        //camera.position.z = 90;
        camera.position.x = 300;
				camera.position.y = 120;
				camera.position.z = 180;
				camera.lookAt(scene.position);
        return camera
      }

      /*
      *创建光源
      */
      function createdLight(){
        var alight = new THREE.AmbientLight("#ffffff", 1);
				alight.name = "aLight";
        return alight
      }

      //渲染器
      function createdRender() {
        // 创建一个渲染器并设置大小，WebGLRenderer将会使用电脑显卡来渲染场景
				let renderer = new THREE.WebGLRenderer({
					antialias: true,
					logarithmicDepthBuffer: true,
				});
        renderer.setSize(window.innerWidth, window.innerHeight);
				renderer.setClearColor(new THREE.Color(0x121A39));
        //获取容器，并加入渲染器
        document.getElementById('three-view').appendChild(renderer.domElement)
        return renderer
      }

      //初始化2D绘制引擎
      function created2DRender(){
        let labelRenderer = new CSS2DRenderer();
        labelRenderer.setSize( window.innerWidth, window.innerHeight );
        labelRenderer.domElement.style.position = 'absolute';
        labelRenderer.domElement.style.top = '0px';
        document.body.appendChild( labelRenderer.domElement );

        var node = document.getElementById('dialog')
        node.style.visibility='visible'
        label2DDialog = new CSS2DObject(node);
        scene.add(label2DDialog);
        label2DDialog.visible = false
        return labelRenderer
      }
      
      /*
      *执行渲染 
      */
      function render(){
        //执行渲染操作
        if (scene && camera) {
          renderer.render(scene,camera)
          labelRenderer.render(scene,camera)
        }
        requestAnimationFrame(render)
        if (currentAngle>0 && doRotate) {
          meshGroup.rotateY(0.005)
          currentAngle += 0.01
          if (currentAngle>1) {
            doRotate = false
          }
        }else{
          if (currentAngle>0) {
            meshGroup.rotateY(-0.005)
            currentAngle -= 0.01
          }
        }
        
        // 用于跟踪时间的对象
        //获取自设置 oldTime 时间以来经过的秒数，并将 oldTime 设置为当前时间，在此delta基本为0
        const delta = new THREE.Clock().getDelta(); 
        if (compose) {
          //渲染拾取
          compose.render(delta);
        }
        //渲染精灵
        if (currentType === 2 || currentType === 3) {
          // 每次渲染都会更新雨滴的位置，进而产生动画效果
          pointGroup.children.forEach(sprite => {
            if (currentType === 2) {
              // 雨滴的y坐标每次减1
              sprite.position.y -= 0.5;
            } else if (currentType === 3) {
              // 雪花的y坐标每次减的数随机
              sprite.position.y -= 0.15 + Math.random() / 10;
              // 雪花的x坐标每次随机
              sprite.position.x += (Math.random() - 0.5) / 5
            }
            if (sprite.position.y < 0) {
              // 如果雨滴落到地面，重置y，从新下落
              sprite.position.y = 200;
            }
          });
        }
      }


      /*
      *鼠标操作-放大、缩小、旋转
      */
      function mouseMove(){
        //创建控件对象
        var controls = new OrbitControls(camera,labelRenderer.domElement)
        controls.minDistance = 100;
        controls.maxDistance = 500;
        //初始化鼠标点击事件
        document.addEventListener("click", onPointerClick);
        //设置控制器阻尼（惯性）
        controls.enableDamping = true
      }

      /*
      *三维场景自适应
      */
      window.addEventListener('resize',onWindowResize,false)
      function onWindowResize(){
        camera.aspect = window.innerWidth/window.innerHeight
        camera.updateProjectionMatrix()
        renderer.setSize(window.innerWidth,window.innerHeight)
        labelRenderer.setSize( window.innerWidth, window.innerHeight);
      }
    </script>

    
  </body>

</html>